<template>
    <div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        <div class="tab">
            <van-tabbar v-model="active">
                <van-tabbar-item  v-for="(item,index) of tab" :key="index" @click="jump(item.path)">
                    <span>{{item.title}}</span>
                    <template #icon="props">
                    <img :src="props.active ? item.icon : item.iconBefore" />
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import URL from 'url'
    export default {
        name:'Tabbar',
        data() {
            return {
                active:0,
                tab:[
                    {
                        title:'阅读',
                        icon:require('@/assets/images/tabs/yuedu_hl.png'),
                        iconBefore:require('@/assets/images/tabs/yuedu.png'),
                        path:'/tabbar/article'
                    },
                    {
                        title:'电影',
                        icon:require('@/assets/images/tabs/dianying_hl.png'),
                        iconBefore:require('@/assets/images/tabs/dianying.png'),
                        path:'/tabbar/movie'
                    },
                    {
                        title:'音乐',
                        icon:require('@/assets/images/tabs/music-sl.png'),
                        iconBefore:require('@/assets/images/tabs/music.png'),
                        path:'/tabbar/music'
                    },
                    {
                        title:'我的',
                        icon:require('@/assets/images/tabs/my-sl.png'),
                        iconBefore:require('@/assets/images/tabs/my.png'),
                        path:'/tabbar/personal'
                    }
                ]
            }
        },
        created(){
            var url = window.location.href
            var basename = URL.parse(url)
            if(basename.path=='/tabbar/article'){
                this.active=0
            }else if(basename.path=='/tabbar/movie'){
                this.active=1
            }else if(basename.path=='/tabbar/music'){
                this.active=2
            }else if(basename.path=='/tabbar/personal'){
                this.active=3
            }
        },
        methods: {
            jump(path){
                this.$router.push(path)
            }
        },
    }
</script>

<style>
.van-tabbar{
    height: 90px;
}
.van-tabbar-item__text{
    font-size: 28px;
}
.van-tabbar-item__icon img{
    width: 40px;
    height: 40px;
}
.tab{
    margin-top: 100px;
}
</style>